import React from "react";
import {
  Card,
  Form,
  Button,
  Table,
  Modal,
  Input,
  message,
  Popconfirm,
  Select,
  Image,
} from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { resetImg } from "../utils/tool";
import { useState, useEffect } from "react";
import FileUpload from "../components/FileUpload";
import { loadZixunCate } from "../services/zixunCate";
import {
  loadZixun,
  updataZixun,
  deleteZixun,
  addZixun,
} from "../services/zixunList";
function ZixunList() {
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const [imageUrl, setImageUrl] = useState("");
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [myForm] = Form.useForm();
  const [total, setTotal] = useState([]);
  const [editId, setEditId] = useState("");
  const [cateProgy, setCateProgy] = useState([]);
  const { Option } = Select;
  const { TextArea } = Input;
  const columns = [
    {
      title: "序号",
      align: "center",
      with: 50,
      render(d, r, index) {
        return <span>{index + 1}</span>;
      },
    },
    {
      title: "名字",
      width: 160,
      dataIndex: "name",
      key: "name",
      align: "center",
    },
    {
      title: "图片",
      align: "center",
      render(d) {
        return (
          <Image
            src={resetImg(d.coverImage)}
            alt={d.name}
            style={{ width: 80 }}
          />
        );
      },
    },
    {
      title: "分类",
      align: "center",
      render(d) {
        return <>{d.category ? d.category.name : "暂无分类"}</>;
      },
    },
    {
      title: "描述",
      dataIndex: "desc",
      align: "center",
      width: 400,
    },

    {
      title: "操作",
      align: "center",
      render(d) {
        return (
          <>
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={() => {
                setIsModalVisible(true);
                setEditId(d.id);
                setImageUrl(d.coverImage);
                myForm.setFieldsValue({
                  name: d.name,
                  desc: d.desc,
                  category: d.category.name,
                });
              }}
            />
            <Popconfirm
              okText="是"
              cancelText="否"
              title="是否确认删除？"
              onConfirm={async () => {
                await deleteZixun(d.id);
                loadCate();
              }}
            >
              <Button
                type="primary"
                style={{ marginLeft: 7 }}
                danger
                icon={<DeleteOutlined />}
              />
            </Popconfirm>
          </>
        );
      },
    },
  ];
  const loadCate = async () => {
    const res = await loadZixun(page);
    // console.log(res.data);
    setList(res.data);
    setTotal(res.total);
    console.log(res.data);
  };
  const loadCateC = async () => {
    const res = await loadZixunCate();
    setCateProgy(res.data);
  };
  useEffect(() => {
    loadCate();
    loadCateC();
  }, [page]);

  const onFinish = async (values) => {
    console.log(values);
    if (editId) {
      await updataZixun(editId, { ...values, coverImage: imageUrl });
    } else {
      await addZixun({ ...values, coverImage: imageUrl });
    }
    setIsModalVisible(false);
    setEditId("");
    message.success("编辑成功");
    loadCate();
  };

  const onFinishFailed = () => {};
  return (
    <Card
      title={<h3>咨询列表</h3>}
      extra={
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setIsModalVisible(true);
            setImageUrl("");
          }}
        />
      }
    >
      <Table
        columns={columns}
        dataSource={list}
        rowKey="id"
        pagination={{
          total: total,
          onChange: (page) => {
            setPage(page);
          },
        }}
      ></Table>
      <Modal
        title="编辑"
        visible={isModalVisible}
        destroyOnClose={true}
        onOk={() => {
          myForm.submit();
        }}
        onCancel={() => setIsModalVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <Form
          preserve={false}
          form={myForm}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="名字"
            name="name"
            rules={[{ required: true, message: "请输入分类名字" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="分类"
            name="category"
            rules={[{ required: true, message: "请输入产品分类" }]}
          >
            <Select style={{ width: 120 }}>
              {cateProgy.map((item) => (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label="描述"
            name="desc"
            rules={[{ required: true, message: "请输入详情" }]}
          >
            <TextArea showCount maxLength={200} rows={8} />
          </Form.Item>
          <Form.Item label="图片">
            <FileUpload imageUrl={imageUrl} setImageUrl={setImageUrl} />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
}

export default ZixunList;
